<style>
  .slideshow-html {
      position: relative;
      max-width: 1200px;
      margin: auto;
   }
  .slideshow-content {
    position: absolute;
    width: 100%;
    top: 80px;
    color: #fff;
  }
  .slideshow-content_banner .slideshow-html .button{
    letter-spacing: -0.7px;
  }
  .slideshow-content_banner .title{
    color: #FFF;
    font-size: 36px;
    font-weight: bold;
    line-height: 48px;
    text-align: left;
    margin-bottom: 0;
  }
  .slideshow-content_banner .html p{
    margin: 0;
    font-size: 36px;
    line-height: 48px;
  }
  .slideshow-content_banner .text p,
  .slideshow-html .text{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 20px 0;
  }
  .slideshow-html {
    position: relative;
}
.slideshow-content_banner .slideshow-html span{
  position: absolute;
  top: -22px;
  padding: 0;
  color: #2F80ED;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.slideshow-content_banner .slideshow-html .tag-sale{
  color: #FF9054;
}
.tenways-index .banner-slideshow_section .swiper-pagination {
    display: block;
    bottom: 0;
}
.banner-slideshow_section .swiper-pagination-bullet{
  width: auto;
  height: auto;
  padding: 4px 10px;
  margin: 0 !important;
  background: transparent;
}
.banner-slideshow_section .swiper-pagination-bullet img{
  background: #fff;
}
.tenways-banner-slideshow .name,
.tenways-banner-slideshow .name img{
  display: block;
  width: 72px;
  height: 52px;
}
.tenways-banner-slideshow a{
  cursor: pointer;
}
.banner-slideshow_pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.tenways-index .banner-slideshow_section .swiper-pagination {
  display: inline-flex;
  background: #fff;
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 6px;
  border-radius: 100px;
}
.banner-slideshow_section .swiper-pagination-bullet{
  border-radius: 40px;
}
.banner-slideshow_section .swiper-pagination .swiper-pagination-bullet-active,
.banner-slideshow_section .swiper-pagination-bullet-active img{
  background: #F0F0F0;
  border-radius: 40px;
}
.banner-slideshow_section .swiper-pagination-bullet:hover,
.banner-slideshow_section .swiper-pagination-bullet:hover img{
  background: #F0F0F0;
  border-radius: 40px;
}
.banner-slideshow_section .mb-bottom{
  display: none;
}
.tenways-index .banner-slideshow{
    margin: 0;
}


@media screen and (max-width: 990px){
  .banner-slideshow_section .image_mobile {
      display: block;
  }
  .slideshow-content {
    top: 40px;
  }
  .slideshow-content_banner .title,
  .slideshow-content_banner .html p{
    font-size: 22px;
    line-height: 32px;
  }
  .slideshow-content_banner .text p, .slideshow-html .text{
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 22px;
  }
  .tenways-banner-slideshow .name img{
    display: none;
  }
  .tenways-banner-slideshow .name{
    width: 20px;
    height: 3px;
  }
  .tenways-index .banner-slideshow_section .swiper-pagination {
    display: inline-flex;
    background: transparent;
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
}
.banner-slideshow_section .swiper-pagination-bullet{
  padding: 0;
  margin: 0 4px !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.40);
  }
.banner-slideshow_pagination {
  bottom: 14px;
}
.banner-slideshow_section .swiper-pagination-bullet{
  position: relative;
  width: 20px;
  height: 3px;
  border-radius: 0;
}
.banner-slideshow_section .swiper-pagination-bullet-active{
  background: rgba(255, 255, 255, 0.40);
}
.banner-slideshow_section .swiper-pagination .swiper-pagination-bullet-active, 
.banner-slideshow_section .swiper-pagination-bullet-active img{
  background: rgba(255, 255, 255, 0.40);
}
.banner-slideshow_section .swiper-pagination-bullet .name {
    width: 0;
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: width .3s cubic-bezier(.25, .45, .46, .92);
    transition: width .3s cubic-bezier(.25, .45, .46, .92);
}
.banner-slideshow_section .swiper-pagination-bullet-active .name{
    width: 20px;
    background: #fff;
}
.banner-slideshow_section .mb-bottom{
  position: absolute;
  bottom: 43px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-slideshow_section .bg-button {
  background: linear-gradient(180deg,#599BF4 0%,#0D74FF 100%);
  letter-spacing: -0.7px;
  }
.banner-slideshow_section .bottom a{
  color: #fff;
  padding: 11px 24px;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
  }
.banner-slideshow_section .bottom path {
    stroke: #fff;
  }
}
</style>
<div class="banner-slideshow_section">
  <div class="{% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %}">
    <div class="swiper swiper-container tenways-banner-slideshow">
      <ul class="banner-swapper swiper-wrapper">
        {% for block in section.blocks %}
           <li class="swiper-slide banner_li-{{ forloop.index }}" {{ block.shopify_attributes }} data-swiper-parallax="-300">
            <div class="">
              {%- if block.settings.button_label != blank -%}               
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
              {% endif %}
                <div class="pc-banner banner__media media{% if block.settings.image == blank %} placeholder{% endif %}"
                 {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}>
                  {%- if block.settings.image -%}
                    <img
                      srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
                      {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
                      {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
                      {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
                      {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
                      {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
                      {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
                      {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
                      {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
                      {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
                      sizes="100vw"
                      src="{{ block.settings.image | image_url: width: 1500 }}"
                      loading="eager"
                      alt="{{ block.settings.image.alt | escape }}"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
                <div class="image_mobile banner__media media{% if block.settings.image_mobile == blank %} placeholder{% endif %}"
              {% if block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}>
                  {%- if block.settings.image_mobile -%}
                    <img
                      srcset="{%- if block.settings.image_mobile.width >= 375 -%}{{ block.settings.image_mobile | image_url: width: 375 }} 375w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 550 -%}{{ block.settings.image_mobile | image_url: width: 550 }} 550w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | image_url: width: 750 }} 750w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 1100 -%}{{ block.settings.image_mobile | image_url: width: 1100 }} 1100w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | image_url: width: 1500 }} 1500w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | image_url: width: 1780 }} 1780w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | image_url: width: 2000 }} 2000w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | image_url: width: 3000 }} 3000w,{%- endif -%}
                      {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | image_url: width: 3840 }} 3840w,{%- endif -%}
                      {{ block.settings.image_mobile | image_url }} {{ block.settings.image_mobile.width }}w"
                      sizes="100vw"
                      src="{{ block.settings.image_mobile | image_url: width: 750 }}"
                      loading="eager"
                      alt="{{ block.settings.image_mobile.alt | escape }}"
                      width="{{ block.settings.image_mobile.width }}"
                      height="{{ block.settings.image_mobile.width | divided_by: block.settings.image_mobile.aspect_ratio | round }}"
                    >
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              {%- if block.settings.button_label != blank -%}
              </a>
            {% endif %}          
            </div>
            {%  if block.settings.html != blank  %}
              <div class="slideshow-content slideshow-content_banner">
                <div class="page-width">
                    <div class="slideshow-html">
                        {% if block.settings.span != blank %}
                          <span class="span tag-{{- block.settings.span | escape | downcase -}}">{{ block.settings.span | escape | upcase }}</span>
                        {%  endif  %}
                        {% if block.settings.title != blank %}
                          <div class="title">{{ block.settings.title }}</div>
                        {%  endif  %}
                        {% if block.settings.html != blank %}
                          <div class="html">{{ block.settings.html }}</div>
                        {%  endif  %}
                        {% if block.settings.text != blank %}
                          <div class="text">{{ block.settings.text }}</div>
                        {%  endif  %}
                        <div class="bottom">
                          {%- if block.settings.button_label != blank -%}
                            <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-hover bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                            {{ block.settings.button_label | escape }}
                          </a>
                          {%- endif -%}  
                          {%- if block.settings.button_label_1 != blank -%}
                          <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                            {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
                          </a>
                        {%- endif -%} 
                        </div>  
                    </div>        
                </div>         
              </div>
             {%  endif  %} 
             <div class="bottom mb-bottom">
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-hover bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                {{ block.settings.button_label | escape }}
              </a>
              {%- endif -%}  
              {%- if block.settings.button_label_1 != blank -%}
              <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
              </a>
            {%- endif -%} 
            </div>  
           </li>
        {% endfor %} 
      </ul>
      {% if section.blocks.size > 1 %}
      <div class="banner-slideshow_pagination">
        <div class="swiper-pagination"></div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% assign image_block = section.blocks | where: "type", "image" %}
{% if section.blocks.size > 1 %}
  <script >
  var swiper = new Swiper('.tenways-banner-slideshow', {
    speed: 1000,
    slidesPerView: 1,
    spaceBetween: 30,
    centeredSlides : true,
    loop: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    autoplay: {
      delay: 6000,
      disableOnInteraction: false
    },
    pagination: {
      el: ".banner-slideshow_pagination .swiper-pagination",
      clickable: true,
      renderBullet: function (index, className) {
      switch(index){
        {%- for block in section.blocks -%}
          case {{ forloop.index0 }}:text='<span class="name"><img src="{{ block.settings.name | img_url: '750x' }} 750w" width="{{ block.settings.name.width }}" height="{{ block.settings.name.height }}"> </span>';break;
        {%- endfor -%}   
      }
      return '<span class="' + className + '">' + text + '</span>';
    },
    },
  });
 </script>
{%  endif %}



{% schema %}
  {
    "name": "Banner slideshow",
    "class": "spaced-section banner-slideshow spaced-section--full-width",
    "tag": "section",
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "default": false,
        "label": "t:sections.rich-text.settings.full_width.label"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
          },
          {
            "type": "image_picker",
            "id": "name",
            "label": "name"
          },
          {
            "type": "text",
            "id": "span",
            "label": "Tag"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "richtext",
            "id": "html",
            "label": "Product name"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
          },
          {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Banner slideshow",
        "blocks": [
          {
            "type": "image"
          }, {
            "type": "image"
          }, {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}